<template>
  <div class="">
      <div class="top">
          
          <div class="logo fadeInLeft">   
         <div class="slogo " > 
           <div class="slo">
           <img src="../assets/img/slogo.png" alt=""  class="img2" />
           </div>
           <!-- <div class="ttt">Future protocol</div> -->
           </div>       
          </div>
          <div class="flexright">
            <div class="navbtn fadeInRight" @click="ethConnect">
            <span>{{userWallet?userWallet :'Connect' |yingcang}}</span>
          </div>
        </div>
        </div>
  </div>
  </template>
  
  <script>
  import { connectTron} from "@/api/Public";
  export default {
    name: 'HelloWorld',
    props: {
      msg: String
    },
    computed: {
      dqyy() {
        if (this.$store.getters.language) {
          return this.$store.getters.language;
        } else {
          return "en-US";
        }
      },
    },
    data(){
      return{
        userWallet:'',
        clmenuShows:false,
        show:false,
        active:"/",
        lang:{},
        langs:[
        ]
      }
    },
    filters:{
      yingcang(val) {
        if (val) {
          let a = val.replace(/(\w{7})\w+(\w{4})/, "$1...$2");       
          return a;
        } else {
          return "...";
        }
      },
    },
    created(){
      this.ethConnect()
      this.userWallet = this.$store.getters.userWallet;   
    },
    methods:{
      noOpen(){
        this.$notify(this.$i18n.t("m.kfz"))
      },
      ethConnect() {
        connectTron().then((info) => {
          if (info[0]&&info[0].indexOf("0x") == 0) {  
            this.userWallet=info[0]  
            this.$store.commit("userWallet", info[0]); 
                    // this.shows=false                  
      // transferHt(info[0]).then(res=>{
      //   if(res){
          // this.pustadd(info[0])
        // }
        // })
          } else {
            // this.$toast(this.$i18n.t("m.qsydzdl"));
          }
        });
      },
      onSelect(item) {
        this.lang=item
        let val=item.value
        this.$i18n.locale = val;
        this.$store.commit("language", val);
        this.show=false
      },
      menuopen() {
        this.langs.map(el=>{
        if(el.value==this.$store.getters.language){
          this.lang=el
        }
      })
      this.active=this.$route.path;
        this.clmenuShows = true;
      },
      gbsmenu(e) {
        this.active=e
        return
        if (e == this.active) {
          return;
        }
        this.clmenuShows = false;      
        if(e){
        this.handleFiexdToolItem(e)
        }
      },
      to(url) {
         window.open(url)
      },
     
      handleFiexdToolItem(e){
      // this.$notify(this.$i18n.t("m.wxtszwkf"))
      // return
    this.$router.push({path:e})
  },
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped lang="scss">
  $t-mf: "PingFang";
  $t-f: "DINAlternate-Bold";
  .top {
      // height: 156px;
      // @include background_color("background_color1");
      
      position: fixed;
      top: 0;
      z-index: 99;
      
  background: #000000bf;
        // background: url("../assets/img/tbg.png")  no-repeat;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 35px;
      width: calc(100%);
      max-width: 750px;
      margin: 0 auto;
      color: #fff;
      box-sizing: border-box;
      border-bottom: 1px solid #582204;
      .logo {
        display: flex;
        align-items: center;    
        .slogo{
  display: flex;
  align-items: center;
        .slo{
  // background: linear-gradient(
  // 128deg
  // ,#ffdf2d,#00e2be);
  // background: linear-gradient(
  // 128deg
  // ,#e7efcd,#00e2be);
  // box-shadow: 0px 4px 16px 4px #00e2be;
  // border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
        }
  
  .ttt{
  font-size: 32px;
  font-family:$t-f;
  font-weight: 600;
  color: #FFFFFF;
  margin-left: 10px;
  }
          .img2{
            width: auto;
            height: 48px;
            // margin-left: -50px;
            // border-radius: 6px;
          }
        }
      }
       .title{
        color: #fff;
        font-size: 36px;
        font-family: $t-mf;
      }
      .navbtn {
        display: flex;
        justify-content: center;
        align-items: center;
       min-width: 150px;
       padding: 0 20px;
  height: 60px;
  border-radius: 8px;
  margin-right: 6px;
   border: 1px solid #333333;
   background:#FF7C36;
  // background: linear-gradient(188.1deg, rgb(175, 57, 239) 18.52%, rgb(139, 61, 206) 71.67%);
  // background: url('../assets/img/bm/b1.png') no-repeat;
  background-size: 100% 100%;
  font-family: $t-mf;
  
  // background: linear-gradient(
  // 128deg
  // ,#ffdf2d,#00e2be);
  // box-shadow: 0px 4px 16px 4px rgba(62,1,162,1);
  // border-radius: 30px;
  font-size: 28px;
  font-weight: 600;
  color: #FFFFFF;
    
      }
        .icosn {
         width: 58px;
  height: 58px;
  border: 1px solid #F89C8A;
  background: #3b3b3b;
  padding: 5px;
  border-radius: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
          .img{
            width: 32px;
            border-radius: 100%;
          }
        }
        .menu{
          width: 58px;
  height: 58px;
  border: 1px solid #F89C8A;
  background: #3b3b3b;
  padding: 5px;
  border-radius: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  .img{
    width: 32px;
  }
        }
        .flexright{
          display: flex;
          align-items: center;
              .lang {
          font-size: 22px;
          font-family: $t-mf;
          font-weight: 600;
         color: #ffffff;
     
         margin-right: 32px;
          line-height: 42px;
          // margin-left: 20px;
        }
        }
    }
  
    .sfelx{
      display: flex;
      flex-direction: column;
      height: 100%;
      border-left: 1px solid #2a2a2a;
      background:  #000000   no-repeat;
           background-size:contain;
           background-position: center top;
    }
  
    .mentop {
      display: flex;
      align-items: center;
      margin: 44px 30px;
      position: relative;
      
  justify-content: center;
      .slogs{
        //  width: 56px;
  // height: 56px;
  margin: 44px 30px;
  // background: linear-gradient(
  // 128deg
  // ,#e7efcd,#00e2be);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
     .logo {
        height: 128px;
      }
    
      }
      .close{
        position: absolute;
        right: 0;
        top: 0px;
        width: 56px;
        height: 56px;
      }
      .gb {
        font-size: 32px;
  font-family: $t-f;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 44px;
  margin-left: 12px;
      }
    }
    .limg{
          height: 40px;
          width: 40px;
          border-radius: 100%;
        }
    .menulist {
      margin-top: 30px;
      .menuitem {
        display: flex;
        align-items: center;      
      justify-content: space-between;
        margin: 20px 24px 20px 44px;
        padding-bottom: 20px;
        .left {
          margin-right: 12px;
          text-align: left;
          display: flex;
          img {
            height: 44px;
            width: 44px;
          }
          .txt {
            margin-left: 30px;
            font-family: $t-mf;
            // font-weight: 600;
            font-size: 28px;
            color: #FFFFFF;
            opacity: 0.5;
            line-height: 50px;
          }
        }
        .right {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          img{
            width: 26px;
            height: 26px;
          }
        }
      }
      .act{
         .txt {
           opacity: 1 !important;
         }
      }
    }
    .foot{
          display: flex;
      flex-direction: column;
      flex: 1;
      justify-content: center;
      padding: 40px;
      .lang{
        display: flex;
        align-items: center;      
      justify-content: center;
      border: 1px solid #fc00ff;
      width: 340px;
      height: 68px;
      border-radius: 18px;
      margin: 10px auto 40px;
      .bbox{
        display: flex;
        align-items: center;      
      justify-content: center;
      }
       
        .ttl{
          font-size: 24px;
  font-family: $t-f;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 34px;
  margin-left: 10px;
  margin-right: 10px;
        }
        .dwimg{
          width: 32px;
          margin-left: 10px;
        }
      }
      .btn{
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100px;
            height: 68px;
            width: 100%;
            font-size: 24px;
        color: #ffffff;
            background: linear-gradient(188.1deg, rgb(175, 57, 239) 18.52%, rgb(139, 61, 206) 71.67%);
      }
      .price{
        font-size: 24px;
  font-family:$t-f;
  font-weight: 600;
  color: #FFFFFF;
  line-height: 34px;
  margin: 18px 0;
  text-align: left;
  .num{
    margin-left: 20px;
    font-family: $t-mf;
  }
      }
      .imgline{
        display: flex;
        align-items: center;
      }
      .slog{
        height: 44px;
        width: 44px;
        margin: 20px;
      }
    }
    .purp{
      position: absolute;
      left: 50%;
      border: 1px solid #20202080;
      transform: translateX(-50%);
      top: 122px;
      background: linear-gradient(135.46deg, rgba(6, 6, 6, 0.5) 24.8%, rgba(32, 32, 32, 0.5) 57.07%);
      padding: 15px 20px;
      inset: 0px auto auto 50%;
      transform: translate3d(-50%, 800px, 0px);
      z-index: 9999;
      .linex{
        display: flex;
        align-items: center;
        margin: 16px;
        .limg{
          width: 40px;
          height: 40px;
          border-radius: 100%;
        }      
        .txt{
          margin-left: 20px;
          font-size: 24px;
          color: #FFFFFF;
        }
      }
    }
  h3 {
    margin: 40px 0 0;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
  </style>
  